<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation>
        <div slot="left">
          <div>
            <el-input v-model="crud.query.patientName" placeholder="患者姓名" style="width:150px;display:inline-block;margin: 3px"></el-input>
            <el-input v-model="crud.query.clinicName" placeholder="诊所名称" style="width:150px;display:inline-block;margin: 3px"></el-input>
            <el-select v-model="crud.query.orderTreatStage" placeholder="诊疗阶段" style="width:150px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.medical_phase" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <!-- <el-date-picker style="width:150px;display:inline-block;margin: 3px" type="date" placeholder="发货期限" suffix-icon="el-icon-date"></el-date-picker> -->
            <el-input v-model="crud.query.doctorName" placeholder="主治医生" style="width:150px;display:inline-block;margin: 3px"></el-input>
            <el-select v-model="crud.query.subOrderTreatStage" placeholder="订单类型" style="width:150px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in dict.sub_order_treat_stage" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="crud.query.prodoctName" placeholder="矫治器" style="width:150px;display:inline-block;margin: 3px">
              <el-option v-for="(item,index) in allProduct" :key="index" :label="item.productName" :value="item.productName"></el-option>
            </el-select>
            <el-input v-model="crud.query.expressCode" placeholder="物流单号" style="width:150px;display:inline-block;margin: 3px"></el-input>
          </div>
        </div>
        <span slot="optsLeft">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
          <el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
          <el-button :disabled="allSelectList.length == 0" class="filter-item" size="mini" type="warning" icon="el-icon-download" @click="crud.export('/order/supply/download')">导出</el-button>
        </span>
      </crudOperation>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        stripe
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="selectionChangeHandler"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="areaId" width="150" sortable label="所属区域"></el-table-column>
        <el-table-column prop="salesId" width="150" sortable label="所属销售"></el-table-column>
        <el-table-column prop="proName" width="150" sortable label="诊所省份"></el-table-column>
        <el-table-column prop="cityName" width="150" sortable label="诊所城市"></el-table-column>
        <el-table-column prop="clinicName" width="150" sortable label="诊所名称">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/doctor',scope.row)">{{ scope.row.clinicName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" width="150" sortable label="所属集团"></el-table-column>
        <el-table-column prop="clinicType" width="150" sortable label="诊所性质">
          <template slot-scope="scope">
            {{ dict.label.clinic_type[scope.row.clinicType] }}
          </template>
        </el-table-column>
        <el-table-column prop="patientName" width="150" sortable label="患者姓名">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="linkSearch('/oper/doctor',scope.row)">{{ scope.row.patientName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="patientId" width="150" sortable label="患者编号"></el-table-column>
        <el-table-column width="150" sortable label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.patientCreateDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gender" sortable label="性别">
          <template slot-scope="scope">
            {{ dict.label.gender[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="patientTarget" width="150" sortable label="患者标签">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.patientTarget ? scope.row.patientTarget.tags : []" :key="index">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="doctorName" width="150" sortable label="主治医生">
          <template slot-scope="scope">
            <a href="javascript:void(0);" style="color: #2688B3;text-decoration: underline;" @click="doctorDetail(scope.row)">{{ scope.row.doctorName }}</a>
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="提交时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="medicalRecordId" width="150" sortable label="病例编号"></el-table-column>
        <el-table-column prop="stlFlag" width="150" sortable label="牙模类型">
          <template slot-scope="scope">
            {{ dict.label.stl_flag[scope.row.stlFlag] }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="牙模收到时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dentalCastRecvDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reportRecvFlag" width="150" sortable label="报告状态"></el-table-column>
        <el-table-column width="150" sortable label="报告上传时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.reportUploadDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reportResult" width="150" sortable label="诊断结果">
          <template slot-scope="scope">
            {{ dict.label.report_result[scope.row.reportResult] }}
          </template>
        </el-table-column>
        <el-table-column prop="subOrderId" width="150" sortable label="订单编号"></el-table-column>
        <el-table-column prop="orderType" width="150" sortable label="订单类型"></el-table-column>
        <el-table-column prop="orderPayFlag" width="150" sortable label="费用类型">
          <template slot-scope="scope">
            {{ dict.label.order_pay_flag[scope.row.orderPayFlag] }}
          </template>
        </el-table-column>
        <el-table-column width="150" sortable label="医生确认制作时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packageInfoName" width="150" sortable label="套餐名称"></el-table-column>
        <el-table-column prop="applianceUsedStr" width="150" sortable label="套餐状态"></el-table-column>
        <el-table-column prop="subOrderTreatStage" width="150" sortable label="诊疗阶段"></el-table-column>
        <el-table-column prop="prodoctName" width="150" sortable label="矫治器"></el-table-column>
        <el-table-column prop="orderStat" width="150" sortable label="诊疗状态"></el-table-column>
        <el-table-column prop="orderSubStat" width="150" sortable label="患者状态"></el-table-column>
        <el-table-column prop="expressStat" width="150" sortable label="物流状态"></el-table-column>
        <el-table-column prop="outBillsUrl" width="150" sortable label="出库单">
          <template slot-scope="scope">
            <a :href="scope.row.outBillsUrl" target="_black" style="color: #2688B3;text-decoration: underline;">{{ scope.row.outBillsUrl }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="expressCode" width="150" sortable label="物流单号"></el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
  </div>
</template>

<script>
import { queryAll } from '@/api/product';
import CRUD, { presenter, header, crud } from '@crud/crud';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import { PROCESS_EN_TYPE } from '@/utils/index';

export default {
  name: 'Supply',
  components: {
    pagination,
    crudOperation
  },
  mixins: [presenter(), header(), crud()],
  dicts: [
    'gender', // 性别
    'patient_parent_rel',
    'stl_flag', // 牙模类型
    'record_stat', // 诊疗状态
    'medical_phase', // 诊疗阶段
    'clinic_type', // 诊所性质
    'patient_stat', // 患者状态
    'report_result', // 报告诊断结果
    'report_stat', // 报告状态
    'order_pay_flag', // 收费标志/收费类型
    'sub_order_treat_stage'
  ],
  cruds() {
    return CRUD({
      title: '供应管理',
      url: '/order/supply/pageQuery',
      serverPath: PROCESS_EN_TYPE.VUE_APP_ORDER_API,
      query: {
        clinicName: '', // 诊所名称
        doctorName: '', // 医生名称
        expressCode: '', // 物流单号
        orderTreatStage: '', // 诊疗阶段
        patientName: '', // 患者名称
        prodoctName: '', // 当前矫治器名称
        subOrderTreatStage: '', // 子订单阶段
        field: []
      },
      sort: 'id,desc',
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: true },
      optRightShow: {
        search: false,
        refresh: false
      },
      downloadLoading: false
    });
  },
  data() {
    return {
      allSelectList: [],
      allProduct: []
    };
  },
  watch: {},
  mounted() {
    this.getAllProduct();
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    selectionChangeHandler(val) {
      this.crud.query.field = [];
      this.allSelectList = val;
      this.allSelectList.forEach(item => {
        this.crud.query.field.push(item.orderId);
      });
    },
    // 获取全部产品(矫治器数据)
    getAllProduct() {
      queryAll({}).then(res => {
        this.allProduct = res;
      });
    },
    // 链接跳转
    linkSearch(link, row) {
      alert('链接跳转查看详情----待开发');
    },
    // 医生详情
    doctorDetail(row) {
      alert('查看医生详情');
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .head-container {
    .top_btn{
      margin-bottom: 10px;
      .item {
        margin-top: 10px;
        margin-right: 30px;
      }
    }
    .search-tools {
      .tools-all {
        //   margin-top:10px;
        vertical-align: top;
      }
      .tools-right {
        display: inline-block;
        border-left: 1px solid #e6e6e6;
        padding-left: 10px;
        .tools-group {
          .group-btns {
            display: inline-block;
            margin-left: 30px;
            margin-bottom: 20px;
            .btn {
              margin-right: 30px;
            }
          }
        }
      }
    }
  }
}
.crud-opts{
  align-items: flex-end;
  .crud-opts-right{
    width: 200px;
  }
}
</style>
